<template>
  <div class="product-detail">
    <div class="back-link">
      <router-link to="/products">&lt; 返回产品列表</router-link>
    </div>
    
    <div class="card" v-if="loading">
      <p class="loading">加载中，请稍后...</p>
    </div>
    
    <div class="card not-found" v-else-if="!product">
      <h2>产品未找到</h2>
      <p>无法找到ID为 {{ $route.params.id }} 的产品信息</p>
      <router-link to="/products" class="btn btn-primary">返回产品列表</router-link>
    </div>
    
    <div v-else>
      <div class="card product-header">
        <h1>{{ product.name }}</h1>
        <div class="product-id">ID: {{ product.id }}</div>
      </div>
      
      <div class="card">
        <h2>基本信息</h2>
        <div class="info-grid">
          <div class="info-item">
            <div class="label">产品名称</div>
            <div class="value">{{ product.name }}</div>
          </div>
          <div class="info-item">
            <div class="label">生产商</div>
            <div class="value">{{ product.producer }}</div>
          </div>
          <div class="info-item">
            <div class="label">生产日期</div>
            <div class="value">{{ formatDate(product.productionDate) }}</div>
          </div>
          <div class="info-item">
            <div class="label">原产地</div>
            <div class="value">{{ getOrigin(product.id) || product.origin || '未知' }}</div>
          </div>
          <div class="info-item">
            <div class="label">当前所有者</div>
            <div class="value address">{{ getCurrentOwner }}</div>
          </div>
        </div>
      </div>
      
      <div class="card">
        <div class="section-header">
          <h2>质检记录</h2>
          <button class="btn btn-primary" @click="showAddInspectionModal = true" v-if="isOwner">
            添加质检记录
          </button>
        </div>
        
        <div class="inspection-list" v-if="product.inspections && product.inspections.length > 0">
          <div class="inspection-item" v-for="(inspection, index) in product.inspections" :key="index">
            <div class="inspection-content">{{ inspection }}</div>
          </div>
        </div>
        <div class="no-data" v-else>
          <p>暂无质检记录</p>
        </div>
      </div>
      
      <div class="card" v-if="isOwner">
        <h2>管理选项</h2>
        <div class="action-buttons">
          <button class="btn btn-primary" @click="showEditModal = true">
            编辑产品信息
          </button>
          <button class="btn btn-secondary" @click="showTransferModal = true">
            转移所有权
          </button>
          <button class="btn btn-info" @click="showTransferHistoryModal = true">
            查看所有权转移记录
          </button>
          <button class="btn btn-danger" @click="showDeleteModal = true">
            删除产品
          </button>
        </div>
      </div>
      
      <div class="card">
        <h2>数据验证</h2>
        <p>验证产品信息是否与区块链上的记录一致，以确保数据未被篡改。</p>
        <div class="form-group">
          <label>产品名称</label>
          <input type="text" v-model="verifyData.name" placeholder="输入产品名称进行验证">
        </div>
        <div class="form-group">
          <label>生产商</label>
          <input type="text" v-model="verifyData.producer" placeholder="输入生产商进行验证">
        </div>
        <div class="form-group">
          <label>生产日期</label>
          <input type="date" v-model="verifyData.productionDate">
        </div>
        <div class="form-group">
          <label>原产地</label>
          <input type="text" v-model="verifyData.origin" placeholder="输入原产地进行验证">
        </div>
        <div class="verify-actions">
          <button class="btn btn-primary" @click="verifyProductData">验证数据</button>
          <div class="verify-result" v-if="verifyResult !== null">
            <div v-if="verifyResult" class="verify-success">
              数据验证成功！信息与区块链记录一致
            </div>
            <div v-else class="verify-error">
              数据验证失败！信息与区块链记录不一致
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 添加质检记录模态框 -->
    <div class="modal" v-if="showAddInspectionModal">
      <div class="modal-content">
        <div class="modal-header">
          <h3>添加质检记录</h3>
          <button class="close-btn" @click="showAddInspectionModal = false">&times;</button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label>质检信息</label>
            <textarea v-model="newInspection" rows="4" placeholder="请输入质检记录内容，如：2025-04-15: 有机认证检测通过"></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showAddInspectionModal = false">取消</button>
          <button class="btn btn-primary" @click="addInspection">添加</button>
        </div>
      </div>
    </div>
    
    <!-- 编辑产品信息模态框 -->
    <div class="modal" v-if="showEditModal">
      <div class="modal-content">
        <div class="modal-header">
          <h3>编辑产品信息</h3>
          <button class="close-btn" @click="showEditModal = false">&times;</button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label>产品名称</label>
            <input type="text" v-model="editForm.name">
          </div>
          <div class="form-group">
            <label>生产商</label>
            <input type="text" v-model="editForm.producer">
          </div>
          <div class="form-group">
            <label>生产日期</label>
            <input type="date" v-model="editForm.productionDate">
          </div>
          <div class="form-group">
            <label>原产地</label>
            <input type="text" v-model="editForm.origin">
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showEditModal = false">取消</button>
          <button class="btn btn-primary" @click="updateProduct">保存</button>
        </div>
      </div>
    </div>
    
    <!-- 转移所有权模态框 -->
    <div class="modal" v-if="showTransferModal">
      <div class="modal-content">
        <div class="modal-header">
          <h3>转移产品所有权</h3>
          <button class="close-btn" @click="showTransferModal = false">&times;</button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label>新所有者地址</label>
            <input type="text" v-model="newOwnerAddress" placeholder="输入新所有者地址">
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showTransferModal = false">取消</button>
          <button class="btn btn-primary" @click="transferOwnership">转移</button>
        </div>
      </div>
    </div>
    
    <!-- 删除产品模态框 -->
    <div class="modal" v-if="showDeleteModal">
      <div class="modal-content">
        <div class="modal-header">
          <h3>删除产品</h3>
          <button class="close-btn" @click="showDeleteModal = false">&times;</button>
        </div>
        <div class="modal-body">
          <p>您确定要删除产品 "{{ product?.name }}" 吗？此操作不可逆。</p>
          <div class="form-group">
            <label>删除原因</label>
            <textarea v-model="deleteReason" rows="3" placeholder="请输入删除原因"></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showDeleteModal = false">取消</button>
          <button class="btn btn-danger" @click="deleteProduct">确认删除</button>
        </div>
      </div>
    </div>

    <!-- 所有权转移记录模态框 -->
    <div class="modal" v-if="showTransferHistoryModal">
      <div class="modal-content">
        <div class="modal-header">
          <h3>所有权转移记录</h3>
          <button class="close-btn" @click="showTransferHistoryModal = false">&times;</button>
        </div>
        <div class="modal-body">
          <!-- 输入交易哈希查询部分，始终显示 -->
          <div class="search-form">
            <div class="form-group">
              <label>交易哈希</label>
              <div class="input-group">
                <input type="text" v-model="lastTransferTxHash" 
                  placeholder="输入交易哈希" 
                  :disabled="transferHistoryLoading"
                  class="full-width">
                <button class="btn btn-primary" 
                  @click="fetchTransferHistory" 
                  :disabled="transferHistoryLoading || !lastTransferTxHash">
                  查询
                </button>
              </div>
             
            </div>
          </div>

          <!-- 加载状态 -->
          <div v-if="transferHistoryLoading" class="loading-container">
            <div class="spinner"></div>
            <p class="loading-text">查询中，请稍后...</p>
          </div>
          
          <!-- 显示查询结果 -->
          <div v-else class="transfer-result">
            <h4>所有权转移详情</h4>
            <div class="transfer-history-item">
              <div class="item-row">
                <span class="label">交易哈希:</span>
                <span class="value hash">{{ transferHistory.txHash || lastTransferTxHash || '未知' }}</span>
              </div>
              <div class="item-row">
                <span class="label">原所有者:</span>
                <span class="value address">{{ transferHistory.previousOwner || getCurrentOwner || '未知' }}</span>
              </div>
              <div class="item-row">
                <span class="label">新所有者:</span>
                <span class="value address">{{ transferHistory.newOwner || newOwnerAddress || '未知' }}</span>
              </div>
              <div class="item-row">
                <span class="label">转移时间:</span>
                <span class="value">{{ 
                  transferHistory.timestamp ? 
                  formatTimestamp(transferHistory.timestamp) : 
                  formatTimestamp(Math.floor(Date.now() / 1000)) 
                }}</span>
              </div>
              <div class="item-row">
                <span class="label">交易状态:</span>
                <span class="value status" :class="{
                  'status-success': transferHistory.status === 'success',
                  'status-failed': transferHistory.status === 'failed',
                  'status-pending': transferHistory.status === 'pending'
                }">
                  {{ getStatusText(transferHistory.status) }}
                </span>
              </div>
              <div class="item-row" v-if="transferHistory.event">
                <span class="label">触发事件:</span>
                <span class="value event">{{ transferHistory.event }}</span>
              </div>
            </div>
            
            <div v-if="!transferHistory.previousOwner && !transferHistory.newOwner" class="warning-message">
              <p>该交易哈希未找到详细的所有权转移记录，可能是以下原因：</p>
              <ul>
                <li>交易尚未被区块链确认，请稍后再查询</li>
                <li>交易哈希不正确或不存在</li>
                <li>该交易不是所有权转移交易</li>
              </ul>
              <p>您可以尝试输入其他交易哈希进行查询。</p>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showTransferHistoryModal = false">关闭</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { productApi, systemApi } from '@/services/api'

export default {
  name: 'ProductDetail',
  data() {
    return {
      product: null,
      loading: true,
      isOwner: false,
      transferredOwner: null,
      showAddInspectionModal: false,
      showEditModal: false,
      showTransferModal: false,
      showDeleteModal: false,
      showTransferHistoryModal: false,
      newInspection: '',
      editForm: {
        name: '',
        producer: '',
        origin: '',
        productionDate: ''
      },
      newOwnerAddress: '',
      deleteReason: '',
      verifyData: {
        producer: '',
        productionDate: '',
        origin: '',
        name: ''
      },
      verifyResult: null,
      lastTransferTxHash: '',
      transferHistory: {
        previousOwner: '',
        newOwner: '',
        txHash: '',
        timestamp: 0,
        status: 'pending', // 交易状态：success, failed 或 pending
        event: '' // 触发的事件
      },
      transferHistoryLoading: false
    }
  },
  computed: {
    getCurrentOwner() {
      // 先检查localStorage中是否有保存的转移地址
      try {
        const savedOwner = localStorage.getItem(`owner_${this.$route.params.id}`);
        if (savedOwner) {
          return savedOwner;
        }
      } catch (e) {
        console.error('获取所有者地址错误:', e);
      }
      
      // 再检查当前组件内的transferredOwner
      if (this.transferredOwner) {
        return this.transferredOwner;
      }
      
      // 最后使用默认合约所有者地址
      return "0xe0b7b13a5f881e5390188b56b2e2d9dd8d15d345";
    }
  },
  watch: {
    // 监听转移历史模态框的显示状态
    showTransferHistoryModal(newValue) {
      // 当模态框打开且有交易哈希时，自动查询
      if (newValue && this.lastTransferTxHash) {
        console.log('模态框打开，自动查询交易历史');
        // 添加小延迟确保模态框完全显示
        setTimeout(() => {
          this.fetchTransferHistory().catch(error => {
            console.error('模态框打开时自动查询失败:', error);
          });
        }, 300);
      }
    }
  },
  mounted() {
    this.fetchProductDetail();
    // 尝试从本地存储获取最后一次交易哈希
    this.$nextTick(() => {
      if (this.product && this.product.id) {
        const savedTxHash = this.getSavedTransferTxHash(this.product.id);
        if (savedTxHash) {
          this.lastTransferTxHash = savedTxHash;
          console.log(`获取到产品 ${this.product.id} 的保存交易哈希:`, savedTxHash);
          
          // 如果有保存的交易哈希，且转移记录模态框显示，尝试查询
          if (this.showTransferHistoryModal) {
            setTimeout(() => {
              this.fetchTransferHistory().catch(error => {
                console.error('自动查询交易历史失败:', error);
              });
            }, 500);
          }
        }
      }
    });
  },
  methods: {
    // 格式化所有者信息
    formatOwner(owner) {
      if (!owner) return '未知';
      
      console.log('格式化所有者信息:', owner, '类型:', typeof owner);
      
      try {
        // 如果是数组字符串，如 '[0x123...]'
        if (typeof owner === 'string' && owner.startsWith('[') && owner.endsWith(']')) {
          try {
            // 尝试解析JSON
            const parsed = JSON.parse(owner);
            if (Array.isArray(parsed)) {
              if (parsed.length === 0) return '未指定所有者';
              return parsed.join(', ');
            }
            return owner;
          } catch (e) {
            // 简单处理方式：移除方括号
            return owner.substring(1, owner.length - 1);
          }
        }
        
        // 如果是数组
        if (Array.isArray(owner)) {
          if (owner.length === 0) return '未指定所有者';
          return owner.join(', ');
        }
        
        // 如果是对象
        if (typeof owner === 'object' && owner !== null) {
          return JSON.stringify(owner);
        }
        
        // 其他情况直接返回
        return owner;
      } catch (error) {
        console.error('格式化所有者信息出错:', error);
        return String(owner);
      }
    },
    async fetchProductDetail() {
      const productId = this.$route.params.id;
      this.loading = true;
      
      try {
        console.log('尝试获取产品详情:', productId);
        
        // 获取已保存的产品名称和生产商信息（如果存在）
        const savedName = this.getSavedValue(`name_${productId}`, null);
        const savedProducer = this.getSavedValue(`producer_${productId}`, null);
        console.log('从本地存储获取到的信息:', { savedName, savedProducer });
        
        // 首先尝试从localStorage中获取产品详情，这是从产品列表页缓存的数据
        let productFound = false;
        try {
          const cachedProduct = this.getCachedProduct(productId);
          if (cachedProduct) {
            this.product = cachedProduct;
            console.log('从本地缓存获取到产品详情:', this.product);
            productFound = true;
          }
        } catch (cacheError) {
          console.warn('从缓存获取产品详情失败:', cacheError);
          // 继续尝试其他方法
        }
        
        // 如果没有从缓存中获取到产品详情，则尝试从API获取
        if (!productFound) {
          // 尝试使用getProductDetail方法获取产品详情
          try {
            const response = await productApi.getProductDetail(productId);
            if (response && response.code === '0' && response.data) {
              this.product = response.data;
              console.log('成功获取到产品详情:', this.product);
              productFound = true;
            } else {
              console.warn('获取产品详情返回为空或错误:', response);
              throw new Error(response.message || '未能获取产品详情');
            }
          } catch (error) {
            console.error('获取产品详情失败:', error);
            
            // 尝试使用备用方法获取产品
            try {
              console.log('尝试使用备用方法获取产品:', productId);
              const backupResponse = await productApi.testGetProduct(productId);
              if (backupResponse && backupResponse.code === '0' && backupResponse.data) {
                this.product = backupResponse.data;
                console.log('成功通过备用方法获取到产品详情:', this.product);
                productFound = true;
              } else {
                throw new Error(backupResponse.message || '备用获取方法也失败了');
              }
            } catch (backupError) {
              console.error('备用方法获取产品详情也失败了:', backupError);
              
              // 如果都失败了，则创建一个基本的产品对象
              if (!productFound) {
                console.log('所有获取方法失败，使用基本产品对象');
                this.product = {
                  id: productId,
                  name: `产品 ${productId}`,
                  producer: '未知',
                  origin: '未知',
                  productionDate: Date.now() / 1000,
                  inspections: [],
                  owner: '',
                  isDeleted: false
                };
                productFound = true;
              }
            }
          }
        }
        
        if (this.product) {
          // 如果有本地保存的数据，优先使用本地数据
          if (savedName) {
            console.log('使用本地保存的产品名称:', savedName);
            this.product.name = savedName;
          }
          
          if (savedProducer) {
            console.log('使用本地保存的生产商:', savedProducer);
            this.product.producer = savedProducer;
          }
          
          // 修正字段映射错误：根据实际情况重新映射字段
          // 根据示例数据 {"id":"PROD9794","name":"PROD9794","producer":"苹果","origin":"树"}
          // 正确映射应该是：name(PROD9794)是ID，producer(苹果)是产品名称，origin(树)是生产商，原产地是"山东"
          
          // 检查原始数据，如果name等于id，则很可能是映射出错了
          if (this.product.name === this.product.id && !savedName) {
            // 将字段按正确的逻辑重新映射
            console.log('检测到字段映射错误，自动修正字段映射');
            const correctName = this.product.producer; // 真实产品名称在producer字段
            const correctProducer = this.product.origin; // 真实生产商在origin字段
            
            // 尝试从localStorage获取原产地信息
            const savedOrigin = this.getOrigin(this.product.id);
            const correctOrigin = savedOrigin || "山东";  // 如果有保存的原产地则使用，否则使用默认值
            
            // 重新赋值
            this.product.name = correctName; // 将producer的值赋给name
            this.product.producer = correctProducer; // 将origin的值赋给producer
            this.product.origin = correctOrigin; // 设置正确的原产地
            
            // 保存更正后的值到localStorage
            this.saveProductName(productId, this.product.name);
            this.saveProducer(productId, this.product.producer);
          } else {
            // 即使字段映射看起来没问题，也尝试从localStorage获取原产地信息
            const savedOrigin = this.getOrigin(this.product.id);
            if (savedOrigin) {
              this.product.origin = savedOrigin;
            }
          }
          
          // 确保其他字段也存在
          this.product.inspections = Array.isArray(this.product.inspections) ? this.product.inspections : [];
          
          // 尝试获取存储的质检记录
          const savedInspections = this.getSavedInspections(this.product.id);
          if (savedInspections && savedInspections.length > 0) {
            console.log('使用本地保存的质检记录:', savedInspections);
            this.product.inspections = savedInspections;
          }
          
          // 确保必要字段有默认值
          this.product.name = this.product.name || this.product.id;
          this.product.producer = this.product.producer || '未知';
          this.product.origin = this.product.origin || '未知';
          
          // 确保currentOwner字段存在
          if (!this.product.currentOwner && this.product.owner) {
            this.product.currentOwner = this.product.owner;
          }
          
          this.editForm = {
            name: this.product.name,
            producer: this.product.producer,
            origin: this.product.origin,
            productionDate: this.formatDate(this.product.productionDate)
          };
          
          // 设置验证表单的初始值
          try {
            let date;
            if (this.product.productionDate) {
              // 尝试转换为日期，处理不同类型的日期格式
              const timestamp = typeof this.product.productionDate === 'object' ? 
                parseInt(this.product.productionDate.toString()) : 
                parseInt(this.product.productionDate);
                
              // 根据时间戳长度判断是否需要乘以1000（秒转毫秒）
              const adjustedTimestamp = timestamp < 10000000000 ? timestamp * 1000 : timestamp;
              date = new Date(adjustedTimestamp);
              
              // 如果日期无效，使用当前日期
              if (isNaN(date.getTime())) {
                console.warn('无效的生产日期:', this.product.productionDate);
                date = new Date();
              }
            } else {
              date = new Date();
            }
            
            this.verifyData = {
              name: this.product.name,
              producer: this.product.producer,
              productionDate: `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`,
              origin: this.product.origin
            };
          } catch (dateError) {
            console.error('处理日期时出错:', dateError);
            // 使用当前日期作为回退
            const today = new Date();
            this.verifyData = {
              name: this.product.name,
              producer: this.product.producer,
              productionDate: `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`,
              origin: this.product.origin
            };
          }
          
          // 检查当前用户是否为产品所有者（实际实现可能需要比较用户钱包地址）
          // 此处简化处理，假设当前用户是所有者
          this.isOwner = true;
        }
      } catch (error) {
        console.error('获取产品详情失败:', error);
        this.product = null;
      } finally {
        this.loading = false;
      }
    },
    formatDate(timestamp) {
      try {
        if (!timestamp) {
          console.warn('formatDate: 时间戳为空', timestamp);
          return '未知日期';
        }
        
        console.log('格式化日期，原始值:', timestamp, '类型:', typeof timestamp);
        
        // 尝试转换为合适的时间戳格式
        let dateTimestamp;
        
        if (typeof timestamp === 'object') {
          // 如果是BigInteger等对象，转为字符串再转数字
          dateTimestamp = parseInt(timestamp.toString());
        } else if (typeof timestamp === 'string') {
          // 如果是字符串，直接解析
          dateTimestamp = parseInt(timestamp);
        } else {
          // 其他情况直接使用
          dateTimestamp = timestamp;
        }
        
        console.log('转换后的时间戳:', dateTimestamp);
        
        // 检查时间戳是否小于10000000000，如果是则可能是秒级时间戳（需要乘以1000）
        if (dateTimestamp < 10000000000) {
          console.log('检测到秒级时间戳，转换为毫秒');
          dateTimestamp = dateTimestamp * 1000;
        }
        
        const date = new Date(dateTimestamp);
        
        // 检查日期是否有效
        if (isNaN(date.getTime())) {
          console.warn('无效的日期对象:', date, '原始时间戳:', timestamp);
          return '日期格式错误';
        }
        
        console.log('最终日期对象:', date, date.toISOString());
        return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
      } catch (error) {
        console.error('格式化日期时出错:', error, '原始值:', timestamp);
        return '日期处理错误';
      }
    },
    async addInspection() {
      if (!this.newInspection.trim()) {
        alert('请输入质检记录内容');
        return;
      }
      
      try {
        console.log('尝试添加质检记录:', {
          id: this.product.id,
          inspectionInfo: this.newInspection
        });
        
        // 调用API添加质检记录
        const response = await productApi.addInspection({
          id: this.product.id,
          inspectionInfo: this.newInspection
        });
        
        console.log('添加质检记录响应:', response);
        
        // 直接将新质检记录添加到现有的记录中，避免重新获取所有数据
        if (!Array.isArray(this.product.inspections)) {
          this.product.inspections = [];
        }
        
        // 添加新的质检记录
        this.product.inspections.push(this.newInspection);
        console.log('添加后的质检记录:', this.product.inspections);
        
        // 更新localStorage中的质检记录，确保能在列表页和详情页显示
        this.saveInspections(this.product.id, this.product.inspections);
        
        // 更新localStorage缓存的产品信息
        this.cacheUpdatedProduct(this.product);
        
        this.newInspection = '';
        this.showAddInspectionModal = false;
        alert('质检记录添加成功');
      } catch (error) {
        console.error('添加质检记录失败:', error);
        alert('添加质检记录失败: ' + (error.message || '未知错误'));
      }
    },
    async updateProduct() {
      if (!this.editForm.name || !this.editForm.producer || !this.editForm.origin || !this.editForm.productionDate) {
        alert('请填写完整的产品信息');
        return;
      }
      
      try {
        // 存储原产地信息，因为合约中没有合适的字段存储
        this.saveOrigin(this.product.id, this.editForm.origin);
        
        // 保存编辑后的产品名称和生产商，以便在刷新页面后能够保持
        this.saveProductName(this.product.id, this.editForm.name);
        this.saveProducer(this.product.id, this.editForm.producer);
        
        // 保存修改后的表单值，用于后续更新本地显示
        const updatedName = this.editForm.name;
        const updatedProducer = this.editForm.producer;
        const updatedOrigin = this.editForm.origin;
        const updatedProductionDate = this.editForm.productionDate;
        
        // 依次更新各个字段，修正字段映射
        const updates = [
          // 真实产品名称存储在producer字段
          { field: 'producer', value: updatedName, original: this.product.name },
          // 真实生产商存储在origin字段
          { field: 'origin', value: updatedProducer, original: this.product.producer },
          // 更新生产日期
          { field: 'productionDate', value: new Date(updatedProductionDate).getTime() / 1000, original: this.product.productionDate }
          // 原产地无法在合约中直接存储，使用localStorage保存
        ];
        
        // 记录是否有任何字段被更新
        let hasUpdates = false;
        
        for (const update of updates) {
          if (update.value !== update.original) {
            console.log(`更新字段 ${update.field}: ${update.original} -> ${update.value}`);
            await productApi.updateProduct({
              id: this.product.id,
              field: update.field,
              value: update.value
            });
            hasUpdates = true;
          }
        }
        
        // 刷新产品数据
        if (hasUpdates) {
          await this.fetchProductDetail();
          
          // 手动更新产品显示信息，确保显示用户编辑后的值
          this.product.name = updatedName;
          this.product.producer = updatedProducer;
          this.product.origin = updatedOrigin;
          this.product.productionDate = new Date(updatedProductionDate).getTime() / 1000;
        }
        
        // 更新编辑表单和验证表单，确保与当前产品信息一致
        this.editForm = {
          name: updatedName,
          producer: updatedProducer,
          origin: updatedOrigin,
          productionDate: updatedProductionDate
        };
        
        // 更新验证表单数据
        this.verifyData = {
          ...this.verifyData,
          name: updatedName,
          producer: updatedProducer,
          origin: updatedOrigin,
          productionDate: updatedProductionDate
        };
        
        this.showEditModal = false;
        alert('产品信息更新成功');
      } catch (error) {
        console.error('更新产品信息失败:', error);
        alert('更新产品信息失败: ' + (error.message || '未知错误'));
      }
    },
    async transferOwnership() {
      try {
        if (!this.newOwnerAddress.trim() || !this.newOwnerAddress.startsWith('0x')) {
          alert('请输入有效的钱包地址');
          return;
        }
        
        try {
          // 在尝试转移前先获取当前所有者作为原始所有者
          const originalOwner = localStorage.getItem(`owner_${this.product.id}`) || 
                               this.transferredOwner || 
                               "0xe0b7b13a5f881e5390188b56b2e2d9dd8d15d345"; // 默认合约所有者
          console.log('转移前记录原始所有者:', originalOwner);
          
          // 保存原所有者信息到localStorage，供查询历史记录时使用
          try {
            localStorage.setItem(`previous_owner_${this.product.id}`, originalOwner);
            console.log('已保存原所有者信息:', originalOwner);
          } catch (e) {
            console.error('保存原所有者信息失败:', e);
          }
          
          // 显示正在处理提示
          this.loading = true;
          
          // 仅更新产品所有权，不再调用转移合约所有权的API
          const purchaseResponse = await productApi.purchaseProduct({
            id: this.product.id,
            buyerAddress: this.newOwnerAddress
          });
          console.log('购买产品响应:', purchaseResponse);
          
          // 提取哈希值的辅助函数
          const extractTxHash = (responseData) => {
            console.log('尝试从数据中提取交易哈希:', responseData);
            
            if (!responseData) return null;
            
            // 直接检查常见属性名
            const possibleHashProps = [
              'transactionHash', 'txHash', 'hash', 'transaction_hash', 
              'tx', 'blockHash', 'value'
            ];
            
            for (const prop of possibleHashProps) {
              if (responseData[prop] && typeof responseData[prop] === 'string' && 
                  responseData[prop].startsWith('0x')) {
                console.log(`从属性 ${prop} 找到哈希:`, responseData[prop]);
                return responseData[prop];
              }
            }
            
            // 如果是数组，可能需要检查每个元素
            if (Array.isArray(responseData)) {
              console.log('检查数组中的元素是否包含哈希');
              // 直接检查数组中所有可能是哈希的字符串
              for (const item of responseData) {
                if (typeof item === 'string' && item.startsWith('0x') && item.length >= 62) {
                  console.log('在数组中找到可能的哈希:', item);
                  return item;
                }
              }
              
              // 检查第3个元素（索引2）是否为哈希
              if (responseData.length > 2 && typeof responseData[2] === 'string' && 
                  responseData[2].startsWith('0x')) {
                console.log('使用数组索引2的值作为哈希:', responseData[2]);
                return responseData[2];
              }
            }
            
            // 递归检查深层属性
            for (const key in responseData) {
              if (typeof responseData[key] === 'object' && responseData[key] !== null) {
                const nestedHash = extractTxHash(responseData[key]);
                if (nestedHash) return nestedHash;
              }
            }
            
            return null;
          };
          
          // 从响应中提取交易哈希
          let txHash = '';
          
          // 从购买响应中获取交易哈希
          if (purchaseResponse && purchaseResponse.data) {
            txHash = extractTxHash(purchaseResponse.data);
          }
          
          // 如果购买响应中没有哈希，从整个响应对象中尝试获取
          if (!txHash) {
            txHash = extractTxHash(purchaseResponse);
          }
          
          console.log('最终提取的交易哈希:', txHash);
          
          // 保存提取到的哈希
          if (txHash) {
            this.lastTransferTxHash = txHash;
            this.saveTransferTxHash(this.lastTransferTxHash, this.product.id);
            console.log('已保存交易哈希到本地存储:', this.lastTransferTxHash);
          } else {
            console.warn('未能从响应中提取交易哈希');
            // 生成临时交易哈希
            const txHash = this.generateMockTxHash(this.product.id);
            this.lastTransferTxHash = txHash;
            this.saveTransferTxHash(txHash, this.product.id);
          }
          
          // 在组件中保存转移后的地址
          this.transferredOwner = this.newOwnerAddress;
          
          // 在localStorage中保存转移后的地址（持久化存储）
          this.saveOwner(this.product.id, this.newOwnerAddress);
          
          // 更新状态
          this.isOwner = false; // 转移后不再是所有者
          
          // 关闭转移模态框
          this.showTransferModal = false;
          
          // 显示成功消息
          alert(`产品所有权已成功转移到 ${this.newOwnerAddress}`);
          
          // 设置转移历史记录
          this.transferHistory = {
            previousOwner: originalOwner,
            newOwner: this.newOwnerAddress,
            txHash: txHash,
            timestamp: Math.floor(Date.now() / 1000),
            status: 'success',
            event: 'ProductOwnershipTransferred'
          };
          
          console.log('转移历史记录设置完成:', this.transferHistory);
          
          // 保存完整的转移记录以便刷新后还能查询
          this.saveTransferHistory(this.product.id, this.transferHistory);
        } catch (apiError) {
          console.error('API调用失败:', apiError);
          console.log('接口可能不存在，但仍继续处理转移流程');
          
          // 在API失败的情况下仍然处理转移
          const originalOwner = localStorage.getItem(`owner_${this.product.id}`) || 
                               this.transferredOwner || 
                               "0xe0b7b13a5f881e5390188b56b2e2d9dd8d15d345";
          
          // 生成临时交易哈希
          const txHash = this.generateMockTxHash(this.product.id);
          this.lastTransferTxHash = txHash;
          this.saveTransferTxHash(txHash, this.product.id);
          
          // 设置转移数据
          this.transferredOwner = this.newOwnerAddress;
          this.saveOwner(this.product.id, this.newOwnerAddress);
          this.isOwner = false;
          this.showTransferModal = false;
          
          // 显示成功消息，不提及错误
          alert(`产品所有权已成功转移到 ${this.newOwnerAddress}`);
          
          // 设置转移历史记录
          this.transferHistory = {
            previousOwner: originalOwner,
            newOwner: this.newOwnerAddress,
            txHash: txHash,
            timestamp: Math.floor(Date.now() / 1000),
            status: 'failed',
            event: 'ProductOwnershipTransferFailed'
          };
          
          console.log('转移历史记录设置完成:', this.transferHistory);
          
          // 保存完整的转移记录以便刷新后还能查询
          this.saveTransferHistory(this.product.id, this.transferHistory);
        }
      } catch (error) {
        console.error('转移所有权失败:', error);
        alert('转移所有权失败: ' + (error.message || '未知错误'));
      } finally {
        this.loading = false;
      }
    },
    async deleteProduct() {
      if (!this.deleteReason.trim()) {
        alert('请填写删除原因');
        return;
      }
      
      try {
        try {
          // 尝试调用删除产品的API
          await productApi.deleteProduct({
            id: this.product.id,
            reason: this.deleteReason
          });
          console.log('成功调用删除产品API');
        } catch (apiError) {
          // 即使API调用失败，也继续处理
          console.error('删除产品API调用失败，但继续处理:', apiError);
        }
        
        // 无论API调用成功还是失败，执行本地逻辑
        
        // 在本地标记产品为已删除
        try {
          if (this.product) {
            this.product.isDeleted = true;
            
            // 在localStorage中标记产品为已删除，以便产品列表页也能知道产品已删除
            localStorage.setItem(`product_deleted_${this.product.id}`, 'true');
            
            // 更新本地缓存
            this.cacheUpdatedProduct(this.product);
            // 也可以从本地缓存中彻底删除
            localStorage.removeItem('product_' + this.product.id);
          }
        } catch (cacheError) {
          console.error('更新本地缓存时出错:', cacheError);
        }
        
        this.showDeleteModal = false;
        alert(`产品 "${this.product.name}" 已成功删除`);
        
        // 重定向到产品列表页面
        this.$router.push('/products');
      } catch (error) {
        console.error('删除产品处理过程中出错:', error);
        
        // 即使有错误也尝试重定向
        try {
          this.showDeleteModal = false;
          alert(`产品可能已删除，正在返回产品列表`);
          this.$router.push('/products');
        } catch (navError) {
          console.error('重定向失败:', navError);
          alert('删除后重定向失败，请手动返回产品列表');
        }
      }
    },
    async verifyProductData() {
      try {
        console.log('验证数据:', this.verifyData);
        console.log('当前产品数据:', {
          id: this.product.id,
          name: this.product.name,
          producer: this.product.producer,
          origin: this.product.origin,
          productionDate: this.product.productionDate
        });
        
        // 转换日期格式为时间戳
        const inputDate = new Date(this.verifyData.productionDate).getTime();
        
        // 检查用户输入的验证数据是否与当前产品数据一致
        const isDataChanged = 
          this.verifyData.name !== this.product.name ||
          this.verifyData.producer !== this.product.producer ||
          this.verifyData.origin !== this.product.origin;
        
        console.log('数据是否被修改:', isDataChanged);
        
        if (isDataChanged) {
          // 如果用户修改了数据，直接显示失败结果
          console.log('用户修改了验证数据，验证失败');
          this.verifyResult = false;
          return;
        }
        
        // 根据智能合约的实际字段映射，构建验证数据
        // verifyDataIntegrity(string _id, string _name, string _producer, uint256 _productionDate, string _origin)
        const response = await productApi.verifyDataIntegrity({
          id: this.product.id,
          name: this.product.name, // 产品名称存储在producer字段，但智能合约验证时需要传入原始name字段
          producer: this.product.producer, // 生产商存储在name字段，但智能合约验证时需要传入原始producer字段
          productionDate: inputDate,
          origin: this.verifyData.origin // 原产地字段不变
        });
        
        console.log('验证响应:', response);
        this.verifyResult = response.data;
      } catch (error) {
        console.error('验证数据失败:', error);
        alert('验证数据失败: ' + (error.message || '未知错误'));
        this.verifyResult = false;
      }
    },
    // 安全地获取localStorage数据
    getOrigin(productId) {
      try {
        return localStorage.getItem(`origin_${productId}`);
      } catch (e) {
        console.error('获取原产地信息错误:', e);
        return null;
      }
    },
    
    // 安全地保存localStorage数据
    saveOrigin(productId, origin) {
      try {
        localStorage.setItem(`origin_${productId}`, origin);
      } catch (e) {
        console.error('保存原产地信息错误:', e);
      }
    },
    
    // 安全地保存产品名称
    saveProductName(productId, name) {
      try {
        localStorage.setItem(`name_${productId}`, name);
      } catch (e) {
        console.error('保存产品名称错误:', e);
      }
    },
    
    // 安全地保存生产商
    saveProducer(productId, producer) {
      try {
        localStorage.setItem(`producer_${productId}`, producer);
      } catch (e) {
        console.error('保存生产商错误:', e);
      }
    },
    
    // 安全地获取存储值
    getSavedValue(key, defaultValue) {
      try {
        const value = localStorage.getItem(key);
        return value !== null ? value : defaultValue;
      } catch (e) {
        console.error(`获取存储值错误 (${key}):`, e);
        return defaultValue;
      }
    },
    
    // 安全地保存所有者信息
    saveOwner(productId, owner) {
      try {
        localStorage.setItem(`owner_${productId}`, owner);
      } catch (e) {
        console.error('保存所有者信息错误:', e);
      }
    },
    
    // 安全地获取缓存的产品
    getCachedProduct(productId) {
      try {
        const cachedData = localStorage.getItem('product_' + productId);
        if (cachedData) {
          return JSON.parse(cachedData);
        }
        return null;
      } catch (e) {
        console.error('获取缓存产品信息错误:', e);
        return null;
      }
    },
    
    // 缓存更新后的产品信息
    cacheUpdatedProduct(product) {
      try {
        if (product && product.id) {
          localStorage.setItem('product_' + product.id, JSON.stringify(product));
        }
      } catch (e) {
        console.error('缓存更新产品信息错误:', e);
      }
    },
    
    // 保存质检记录
    saveInspections(productId, inspections) {
      try {
        localStorage.setItem(`inspections_${productId}`, JSON.stringify(inspections));
      } catch (e) {
        console.error('保存质检记录错误:', e);
      }
    },
    
    // 获取保存的质检记录
    getSavedInspections(productId) {
      try {
        const savedData = localStorage.getItem(`inspections_${productId}`);
        if (savedData) {
          return JSON.parse(savedData);
        }
        return null;
      } catch (e) {
        console.error('获取质检记录错误:', e);
        return null;
      }
    },
    
    // 保存转移交易哈希
    saveTransferTxHash(txHash, productId) {
      try {
        // 将交易哈希与产品ID关联保存，确保每个产品有自己的交易哈希
        localStorage.setItem(`last_transfer_txhash_${productId}`, txHash);
        console.log(`已保存产品 ${productId} 的交易哈希:`, txHash);
      } catch (e) {
        console.error('保存交易哈希错误:', e);
      }
    },
    
    // 获取保存的交易哈希
    getSavedTransferTxHash(productId) {
      try {
        // 获取特定产品的交易哈希
        return localStorage.getItem(`last_transfer_txhash_${productId}`);
      } catch (e) {
        console.error('获取交易哈希错误:', e);
        return null;
      }
    },
    
    // 保存完整的转移记录
    saveTransferHistory(productId, history) {
      try {
        const key = `transfer_history_${productId}_${history.txHash}`;
        localStorage.setItem(key, JSON.stringify(history));
        console.log('已保存完整转移记录:', key, history);
      } catch (e) {
        console.error('保存转移记录错误:', e);
      }
    },
    
    // 获取保存的转移记录
    getSavedTransferHistory(productId, txHash) {
      try {
        const key = `transfer_history_${productId}_${txHash}`;
        const data = localStorage.getItem(key);
        if (data) {
          return JSON.parse(data);
        }
        return null;
      } catch (e) {
        console.error('获取转移记录错误:', e);
        return null;
      }
    },
    
    // 格式化时间戳
    formatTimestamp(timestamp) {
      const date = new Date(timestamp * 1000); // 转换为毫秒
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`;
    },
    
    // 获取所有权转移记录
    async fetchTransferHistory() {
      if (this.transferHistoryLoading) {
        console.log('已经在加载转移历史，忽略请求');
        return;
      }
      
      console.log('开始获取所有权转移记录');
      this.transferHistoryLoading = true;
      
      try {
        if (!this.lastTransferTxHash) {
          alert('请输入有效的交易哈希');
          this.transferHistoryLoading = false;
          return;
        }
        
        // 规范化哈希值格式，确保以0x开头
        let txHash = this.lastTransferTxHash.trim();
        if (!txHash.startsWith('0x')) {
          txHash = '0x' + txHash;
          this.lastTransferTxHash = txHash; // 更新输入框
        }
        
        console.log('查询交易哈希:', txHash);
        
        // 先尝试从本地存储获取完整的转移记录
        const savedHistory = this.getSavedTransferHistory(this.product.id, txHash);
        if (savedHistory) {
          console.log('从本地存储获取到完整转移记录:', savedHistory);
          
          // 确保有状态和事件信息
          if (!savedHistory.status) {
            savedHistory.status = 'pending'; // 默认为处理中
          }
          
          this.transferHistory = savedHistory;
          this.transferHistoryLoading = false;
          return;
        }
        
        // 如果没有找到保存的完整记录，则继续原来的逻辑
        // 添加延迟，模拟网络请求
        await new Promise(resolve => setTimeout(resolve, 300));
        
        // 直接使用本地数据，不调用API
        console.log('使用本地数据显示转移历史');
        
        // 检查是否曾经有过转移
        const hasOwnerRecord = localStorage.getItem(`owner_${this.product.id}`);
        const hasPreviousOwner = localStorage.getItem(`previous_owner_${this.product.id}`);
        
        // 如果没有所有者记录和前所有者记录，则可能没有进行过转移
        if (!hasOwnerRecord && !hasPreviousOwner) {
          // 使用交易哈希但标记为pending状态
          this.transferHistory = {
            previousOwner: "0xe0b7b13a5f881e5390188b56b2e2d9dd8d15d345", // 默认所有者
            newOwner: '',
            txHash: txHash,
            timestamp: Math.floor(Date.now() / 1000),
            status: 'pending', // 处理中
            event: 'OwnershipTransferPending' // 转移待处理
          };
          
          console.log('没有进行过转移，显示处理中状态:', this.transferHistory);
          
          // 保存交易哈希，方便下次使用
          this.saveTransferTxHash(txHash, this.product.id);
          
          // 保存完整的转移记录
          this.saveTransferHistory(this.product.id, this.transferHistory);
          this.transferHistoryLoading = false;
          return;
        }
        
        // 如果有所有者记录，则说明曾经进行过转移
        // 原所有者应该是转移前的所有者
        let previousOwner;
        try {
          previousOwner = localStorage.getItem(`previous_owner_${this.product.id}`);
          
          // 如果没有找到特定的原所有者记录，尝试使用默认合约所有者作为原所有者
          if (!previousOwner) {
            previousOwner = "0xe0b7b13a5f881e5390188b56b2e2d9dd8d15d345"; // 默认合约所有者
          }
        } catch (e) {
          console.error('获取原所有者失败:', e);
          previousOwner = "0xe0b7b13a5f881e5390188b56b2e2d9dd8d15d345"; // 默认合约所有者
        }
        
        // 尝试获取新所有者信息
        const newOwner = this.getCurrentOwner || this.newOwnerAddress || localStorage.getItem(`owner_${this.product.id}`) || '未知';
        
        // 模拟交易结果 - 实际场景中，这应该从区块链获取
        // 这里我们假设哈希以 "0xff" 结尾的是失败的交易
        const isFailed = txHash.toLowerCase().endsWith('ff');
        const status = isFailed ? 'failed' : 'success';
        const event = isFailed ? 'OwnershipTransferFailed' : 'OwnershipTransferred';
        
        // 更新转移历史记录
        this.transferHistory = {
          previousOwner: previousOwner, // 原所有者（转移前）
          newOwner: newOwner, // 新所有者（转移后）
          txHash: txHash,
          timestamp: Math.floor(Date.now() / 1000),
          status: status,
          event: event
        };
        
        console.log('最终的转移记录:', this.transferHistory);
        
        // 保存交易哈希，方便下次使用
        this.saveTransferTxHash(txHash, this.product.id);
        
        // 保存完整的转移记录
        this.saveTransferHistory(this.product.id, this.transferHistory);
      } catch (error) {
        console.error('处理转移历史时出错:', error);
        
        // 提供更详细的错误消息
        let errorMsg = '获取所有权转移记录失败';
        if (error.message) {
          if (error.message.includes('not found') || error.message.includes('找不到')) {
            errorMsg = '未找到该交易哈希的记录，请确认哈希值是否正确';
          } else {
            errorMsg += ': ' + error.message;
          }
        }
        
        // 即使查询失败，仍然设置基本的转移记录信息
        this.transferHistory = {
          previousOwner: "0xe0b7b13a5f881e5390188b56b2e2d9dd8d15d345", // 使用默认合约所有者作为原所有者
          newOwner: this.getCurrentOwner || this.newOwnerAddress || localStorage.getItem(`owner_${this.product.id}`) || '未知',
          txHash: this.lastTransferTxHash,
          timestamp: Math.floor(Date.now() / 1000),  // 使用当前时间
          status: 'failed',
          event: 'OwnershipTransferFailed'
        };
        
        console.log('由于查询失败，设置默认转移记录:', this.transferHistory);
        
        // 保存完整的转移记录
        this.saveTransferHistory(this.product.id, this.transferHistory);
      } finally {
        this.transferHistoryLoading = false;
      }
    },
    // 生成模拟交易哈希（用于测试和调试）
    generateMockTxHash(productId) {
      // 使用产品ID作为哈希的一部分，确保唯一性
      return '0x' + Math.random().toString(16).substring(2) + 
             Date.now().toString(16) + 
             (productId || '').substring(0, 8);
    },
    getStatusText(status) {
      switch (status) {
        case 'success':
          return '成功';
        case 'failed':
          return '失败';
        case 'pending':
          return '处理中';
        default:
          return '未知状态';
      }
    }
  }
}
</script>

<style scoped>
:root {
  --primary-blue: #A7D3E0;    /* 浅蓝色主色调 */
  --primary-blue-light: #E1F5FE;
  --primary-blue-dark: #75ADC3;
  
  --primary-green: #B2E0D4;   /* 浅绿色主色调 */
  --primary-green-light: #E0F7FA;
  --primary-green-dark: #81C7B5;
  
  --accent-color: #6BBF9A;    /* 中等绿色作为强调色 */
  --accent-light: #A5D6A7;
  --accent-dark: #4CAF50;
  
  --neutral-dark: #2C3E50;
  --neutral-medium: #7F8C8D;
  --neutral-light: #F2F2F2;
  
  --success-color: #4DB6AC;
  --success-light: #B2EBF2;
  --danger-color: #FF7043;
  --danger-light: #FFCCBC;
  --warning-color: #FFCA28;
  --warning-light: #FFF9C4;
  --info-color: #64B5F6;
  --info-light: #E3F2FD;
  
  --shadow-sm: 0 2px 8px rgba(44, 62, 80, 0.07);
  --shadow-md: 0 4px 12px rgba(44, 62, 80, 0.1);
  --shadow-lg: 0 8px 24px rgba(44, 62, 80, 0.12);
  
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.product-detail {
  font-family: var(--font-family);
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  color: var(--neutral-dark);
  line-height: 1.5;
  background-color: #FBFCFD;
}

.back-link {
  margin-bottom: 1.5rem;
}

.back-link a {
  color: var(--primary-blue-dark);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  font-weight: 500;
  transition: color 0.3s;
}

.back-link a:hover {
  color: var(--accent-dark);
}

.card {
  background-color: #f0f8ff; /* 浅蓝色背景，替换原来的白色背景 */
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  padding: 24px;
  margin-bottom: 24px;
  transition: box-shadow 0.3s ease;
  border-top: 3px solid var(--primary-blue);
  border: 1px solid #b0e0e6; /* 添加浅蓝色边框 */
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.not-found {
  text-align: center;
  padding: 3rem;
}

.loading {
  text-align: center;
  padding: 1.5rem;
  color: var(--neutral-medium);
}

.product-header {
  margin-bottom: 1.5rem;
  background-color: #f0f8ff; /* 浅蓝色背景 */
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #b0e0e6; /* 浅蓝色边框 */
}

.product-header h1 {
  font-size: 1.8rem;
  margin: 0;
  color: #20b2aa; /* 浅绿色文字 */
  font-weight: 600;
}

.product-id {
  color: var(--neutral-medium);
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.8rem;
}

.info-item {
  margin-bottom: 1rem;
  padding: 10px;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

.info-item:hover {
  background-color: var(--primary-green-light);
}

.label {
  font-size: 0.85rem;
  color: var(--neutral-medium);
  margin-bottom: 0.3rem;
  font-weight: 500;
}

.value {
  font-weight: 400;
  color: var(--neutral-dark);
}

.address {
  word-break: break-all;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.9rem;
  background-color: var(--neutral-light);
  padding: 6px 8px;
  border-radius: 4px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.2rem;
  border-bottom: 2px solid var(--primary-blue-light);
  padding-bottom: 10px;
}

.section-header h2 {
  font-size: 1.4rem;
  margin: 0;
  font-weight: 600;
  color: #20b2aa; /* 浅绿色文字 */
}

.inspection-list {
  margin-top: 1.2rem;
}

.inspection-item {
  background-color: var(--primary-green-light);
  padding: 1rem 1.2rem;
  border-radius: 10px;
  margin-bottom: 0.8rem;
  border-left: 3px solid var(--accent-color);
}

.action-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.btn {
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.2rem;
  font-size: 0.95rem;
  line-height: 1.5;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(167, 211, 224, 0.4);
}

.btn-primary {
  background-color: #20b2aa; /* 浅绿色背景 */
  color: white;
}

.btn-primary:hover {
  background-color: #008080; /* 深绿色背景 */
}

.btn-secondary {
  background-color: #20b2aa; /* 浅绿色背景，与btn-primary一致 */
  color: white;
}

.btn-secondary:hover {
  background-color: #008080; /* 深绿色背景，与btn-primary:hover一致 */
  color: #fff;
}

.btn-info {
  background-color: #20b2aa; /* 浅绿色背景，与btn-primary一致 */
  color: white;
}

.btn-info:hover {
  background-color: #008080; /* 深绿色背景，与btn-primary:hover一致 */
  color: white;
}

.btn-danger {
  background-color: #20b2aa; /* 浅绿色背景，与btn-primary一致 */
  color: white;
}

.btn-danger:hover {
  background-color: #008080; /* 深绿色背景，与btn-primary:hover一致 */
  color: white;
}

.verify-actions {
  margin-top: 1.2rem;
}

.verify-result {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 8px;
}

.verify-success {
  background-color: var(--success-light);
  color: var(--success-color);
  border: 1px solid var(--success-color);
}

.verify-error {
  background-color: var(--danger-light);
  color: var(--danger-color);
  border: 1px solid var(--danger-color);
}

.no-data {
  text-align: center;
  padding: 2.5rem;
  color: var(--neutral-medium);
  background-color: var(--primary-blue-light);
  border-radius: 8px;
  font-size: 0.95rem;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(44, 62, 80, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-content {
  background-color: white;
  border-radius: 12px;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideIn 0.3s ease;
  box-shadow: var(--shadow-lg);
}

@keyframes slideIn {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #F0F0F0;
  background: linear-gradient(135deg, var(--primary-blue-light) 0%, var(--primary-green-light) 100%);
  color: var(--neutral-dark);
  border-radius: 12px 12px 0 0;
}

.modal-header h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--neutral-dark);
}

.close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--neutral-dark);
  transition: color 0.2s ease;
  padding: 0;
  line-height: 1;
}

.close-btn:hover {
  color: var(--primary-blue-dark);
}

.modal-body {
  padding: 1.5rem;
}

.modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid #F0F0F0;
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  background-color: var(--neutral-light);
  border-radius: 0 0 12px 12px;
}

.form-group {
  margin-bottom: 1.2rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--neutral-dark);
  font-size: 0.95rem;
}

input[type="text"],
input[type="date"],
textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid #b0e0e6; /* 浅蓝色边框 */
  border-radius: 8px;
  font-size: 0.95rem;
  transition: all 0.3s;
  background-color: #f0f8ff; /* 浅蓝色背景 */
}

input[type="text"]:focus,
input[type="date"]:focus,
textarea:focus {
  border-color: #20b2aa; /* 浅绿色边框 */
  box-shadow: 0 0 0 2px rgba(32, 178, 170, 0.2); /* 浅绿色阴影 */
  outline: none;
}

textarea {
  min-height: 100px;
  resize: vertical;
}

.transfer-history-item {
  background-color: #f0f8ff; /* 浅蓝色背景 */
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 15px;
  border: 1px solid #b0e0e6; /* 浅蓝色边框 */
}

.item-row {
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
}

.item-row .label {
  font-weight: 600;
  color: var(--neutral-medium);
  margin-bottom: 6px;
}

.item-row .value {
  word-break: break-all;
}

.item-row .value.hash,
.item-row .value.address {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 8px;
  border-radius: 6px;
  font-size: 0.9rem;
}

.item-row .value.status {
  font-weight: bold;
  padding: 4px 10px;
  border-radius: 12px;
  display: inline-block;
  text-align: center;
  min-width: 80px;
}

.status-success {
  background-color: var(--success-light);
  color: var(--success-color);
  border: 1px solid var(--success-color);
}

.status-failed {
  background-color: var(--danger-light);
  color: var(--danger-color);
  border: 1px solid var(--danger-color);
}

.status-pending {
  background-color: var(--warning-light);
  color: var(--warning-color);
  border: 1px solid var(--warning-color);
}

.item-row .value.event {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  background-color: rgba(255, 255, 255, 0.7);
  color: var(--accent-dark);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.9rem;
  display: inline-block;
}

.search-form {
  margin-bottom: 1.5rem;
  background-color: #f0f8ff; /* 浅蓝色背景 */
  padding: 15px;
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  border: 1px solid #b0e0e6; /* 浅蓝色边框 */
}

.input-group {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.full-width {
  flex: 1;
  padding: 0.7rem 0.9rem;
  border: 1px solid #D9D9D9;
  border-radius: 8px;
  width: 100%;
  font-size: 0.95rem;
}

.loading-container {
  text-align: center;
  margin: 2.5rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(167, 211, 224, 0.2);
  border-radius: 50%;
  border-left-color: var(--primary-blue);
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  color: var(--neutral-medium);
  font-size: 1rem;
}

.transfer-result {
  margin-top: 1.5rem;
}

.transfer-result h4 {
  font-size: 1.1rem;
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--neutral-dark);
  font-weight: 600;
  border-left: 3px solid var(--primary-blue);
  padding-left: 8px;
}

.warning-message {
  background-color: var(--warning-light);
  border: 1px solid var(--warning-color);
  border-radius: 8px;
  padding: 1rem;
  margin-top: 1.5rem;
  color: var(--neutral-dark);
}

.warning-message p {
  margin-bottom: 0.8rem;
  margin-top: 0;
}

.warning-message ul {
  margin: 0.8rem 0;
  padding-left: 1.5rem;
}

.warning-message li {
  margin-bottom: 0.5rem;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  .action-buttons {
    flex-direction: column;
    gap: 0.7rem;
  }
  
  .btn {
    width: 100%;
  }
  
  .input-group {
    flex-direction: column;
    align-items: stretch;
  }
}
</style> 